<template>
  <div class="home">
     <home-head></home-head>
     <home-swiper :banner="banner"></home-swiper>
     <home-icons :icons="icons"></home-icons>
     <home-recommend :recommendList="recommendList"></home-recommend>
     <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>
<script>
import HomeHead from './components/Head'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/weekend'
import {HomeModel} from '../../models/HomeModel'
const homeModel =new HomeModel();
export default {
  name: 'home',
  components: {
     HomeHead,
     HomeSwiper,
     HomeIcons,
     HomeRecommend,
     HomeWeekend,
     
  },
  data(){
    return {
      banner:[],
      icons:[],
      recommendList:[],
      weekendList:[],
      currentCity:""
    }
  },
  computed:{
     city(){
       return this.$store.state.city
     }
  },
  mounted() {
    //this.currentCity=this.city;
   homeModel.getHomeData(this.city).then(res=>{
     this.handleData(res);
   })
  },
  watch:{
    city(){
homeModel.getHomeData(this.city).then(res=>{
  this.handleData(res);
   })
    }
  },
  methods: {
    handleData(res){
       let data=res.data.data;
    //  console.log(data)
     let {banner,icons,recommendList,weekendList}=data;
     this.banner=banner;
     this.icons=icons;
     this.recommendList=recommendList;
     this.weekendList=weekendList;
    }
  },
//   activated(){
//     if(this.currentCity!=this.city){
//  this.currentCity=this.city;
//    homeModel.getHomeData(this.city).then(res=>{
//      let data=res.data.data;
//     //  console.log(data)
//      let {banner,icons,recommendList,weekendList}=data;
//      this.banner=banner;
//      this.icons=icons;
//      this.recommendList=recommendList;
//      this.weekendList=weekendList;
//    })
//     }
//   },

}
</script>
<style lang="scss" scoped>

</style>

